<template>
	<div class="category-content order-content">
		<div class="main-width">
			<div class="manage-center-content">
				<div class="manage-slide">
					<el-col>
					    <el-menu default-active="1-1" class="el-menu-vertical-demo" :default-openeds="defaultOpen">
					    	<el-submenu index="1">
					        	<template slot="title"><i class="default-order-icon default-center-icon"></i>个人中心</template>

					        	<el-menu-item index="1-1">
					        		<template slot="title">个人信息</template>
					        	</el-menu-item>
				        	
					      	</el-submenu>
					    </el-menu>
				  	</el-col>
				</div>
				<div>
					<div class="manage-info">
						<img :src="imgAddress + info.logoPath" @error="error(4)"/>
						<span>{{info.platformName}}</span>
						<span class="font">{{info.levelName}} 
							<el-tooltip class="item" effect="dark" content="年度交易流水超过预定目标享受更优惠供应价格" placement="top">
						      	<i class="el-icon-information"></i>
						    </el-tooltip>
						</span>
						<span class="font-color-green" :class="{'display-none': !isModify}" @click="showModifyPw">修改密码</span>
					</div>
					<div v-show="isModify">
						<div class="manage-config-info">
							<div class="manage-config-info-title">时间配置信息</div>
							<div class="manage-config-info-content">
								<div>已收货天数：{{info.toReceiveDays}}天</div>
								<div>已完成天数：{{info.toSuccessDays}}天</div>
							</div>
						</div>
						<div class="manage-config-info margin-bottom-15" v-show="isAddressModify">
							<div class="manage-config-info-title">收票地址信息</div>
							<div class="manage-config-info-content">
								<div>地址：<span>{{info.address}}</span></div>
								<div>电话：<span>{{info.tel}}</span></div>
								<span class="manage-modify-btn font-color-orange" @click="showUpdateAddress">修改</span>
							</div>
						</div>
						<div class="manage-config-info margin-bottom-15" v-show="!isAddressModify">
							<div class="manage-config-info-title">收票地址信息</div>
							<div class="manage-config-info-content">
								<div>地址：
									<span class="manage-config-info-input">
										<input type="text" v-model="userAddress"/>
									</span>
								</div>
								<div>电话：
									<span class="manage-config-info-input">
										<input type="tel" v-model="userMobil"/>
									</span>
								</div>
								<a class="manage-save-btn font-color-orange" @click="updateAddress">保存</a>
								<span class="manage-modify-btn" @click="cancelUpdateAddress">取消</span>
							</div>
						</div>
					</div>
					<div v-show="!isModify">
						<div class="manage-config-info margin-bottom-15">
							<div class="manage-config-info-title">修改密码</div>
							<div class="manage-config-info-content">
								<div>
									<label>原始密码：</label>
									<span class="manage-config-info-input modifyPw-input">
										<input type="password" v-model="oldPw" @focus="hideTip"/>
									</span>
									<span class="modifyPw-tip font-color-green">忘记密码请联系客服</span>
									<div v-show="pwErrorTip" class="modifyPw-error-tip">
										<label></label>
										<span class="font-color-red">密码错误</span>
									</div>
								</div>
								<div>
									<label>新密码：</label>
									<span class="manage-config-info-input modifyPw-input">
										<input type="password" v-model="newPw"/>
									</span>
									<span class="modifyPw-tip font-color-green">注：英文区分大小写</span>
									<div v-show="newPwTip" class="modifyPw-error-tip">
										<label></label>
										<span class="font-color-red">密码至少6位</span>
									</div>
								</div>
								<div>
									<label>确认新密码：</label>
									<span class="manage-config-info-input modifyPw-input">
										<input type="password" v-model="confirmNewPw"/>
									</span>
									<div v-show="confirmErrorTip" class="modifyPw-error-tip">
										<label></label>
										<span class="font-color-red">请与新密码保持一致</span>
									</div>
								</div>
								<a class="manage-save-btn font-color-orange" @click="modifyPw">保存</a>
								<span class="manage-modify-btn" @click="cancelPwModify">取消</span>
							</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import store from '../store/index.js'
	import {encryInfo, centerInfo, updatePw, updateData, imgAddress} from '../config/interface.js'
	import {toast, imageError} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'
	import router from '../router/index.js'
	import '../util/md5.min.js'

	export default {
		data(){
			return {
				defaultOpen: ['1'],
				userId: store.state.userId,
				info: {},
				isModify: true,
				isAddressModify: true,
				imgAddress: imgAddress,
				oldPw: '',
				newPw: '',
				confirmNewPw: '',
				newPwTip: false,
				pwErrorTip: false,
				confirmErrorTip: false,
				userAddress: '',
				userMobil: ''
			}
		},
		watch: {
			confirmNewPw: function(val){
				if(val != this.newPw){
					this.confirmErrorTip = true;
				}else{
					this.confirmErrorTip = false;
				}
			}
		},
		mounted(){
			this.init();
		},
		methods: {
			error(num){
				imageError(num, event);
			},
			init(){
				var data = {
					userId: this.userId
				};
				var url = centerInfo;
				fetch(url, data)
				.then(res => {
                    this.info = res.data;
                    this.userAddress = this.info.address;
                    this.userMobil = this.info.tel;
                });
			},
			showModifyPw(){
				this.isModify = !this.isModify;
			},
			modifyPw(){
				if(this.oldPw == ""){
					var str = "原始密码不能为空";
					toast(str, 2, false);
					return;
				}
				if(this.newPw == ""){
					var str = "新密码不能为空";
					toast(str, 2, false);
					return;
				}
				if(this.newPw.length < 6){
					this.newPwTip = true;
					var str = "新密码不能少于6位";
					toast(str, 2, false);
					return;
				}else{
					this.newPwTip = false;
				}
				if(this.confirmNewPw == ""){
					var str = "确认密码不能为空";
					toast(str, 2, false);
					return;
				}
				if(this.newPw != this.confirmNewPw){
					var str = "两次密码不一致";
					toast(str, 2, false);
					return;
				}
				var newPassword = md5(this.newPw + encryInfo);
				var oldPassword = md5(this.oldPw + encryInfo);
				var data = {
					newPassword: newPassword,
					oldPassword: oldPassword,
					userId: this.userId
				};
				var url = updatePw;
				fetch(url, data)
				.then(res => {
                    if(res.code == 10000){
                    	var str = "修改成功";
						toast(str, 1, false);
						this.cancelPwModify();
                    }else if(res.code == 20106){
                    	var str = "密码错误";
						toast(str, 2, false);
						this.pwErrorTip = true;
                    }else if(res.code == 20000){
                    	var str = "服务器异常";
						toast(str, 2, false);
                    }
                });
			},
			hideTip(){
				this.pwErrorTip = false;
			},
			cancelPwModify(){
				this.isModify = !this.isModify;
				this.oldPw = '';
				this.newPw = '';
				this.confirmNewPw = '';
				this.newPwTip = false;
				this.pwErrorTip = false;
				this.confirmErrorTip = false;
			},
			showUpdateAddress(){
				this.isAddressModify = !this.isAddressModify;
			},
			cancelUpdateAddress(){
				this.isAddressModify = !this.isAddressModify;
				this.userAddress = this.info.address;
                this.userMobil = this.info.tel;
			},
			updateAddress(){
				if(this.userAddress == ""){
					var str = "请输入地址";
					toast(str, 2, false);
					return;
				}
				if(this.userMobil == ""){
					var str = "请输入电话号码";
					toast(str, 2, false);
					return;
				}
				var data = {
					address: this.userAddress,
					apiUrl: '',
					billHeader: '',
					logoPath: '',
					platformName: '',
					taxNumber: '',
					tel: this.userMobil,
					toReceiveDays: '',
					to_success_days: '',
					userId: this.userId
				};
				var url = updateData;
				fetch(url, data)
				.then(res => {
					if(res.code == 10000){
                    	var str = "修改成功";
						toast(str, 1, false);
						this.isAddressModify = !this.isAddressModify;
						this.init();
                    }else{
                    	var str = "修改失败";
						toast(str, 2, false);
                    }
				});
			}
		}
	}
</script>
<style>
	
</style>